<script setup>
	import { ref } from 'vue'
	import {
		Document,
		Menu as IconMenu,
		Setting,
	} from '@element-plus/icons-vue'

	const result = ref([])

	const handleOpen = async (key, keyPath) => {}
	const handleClose = (key, keyPath) => {
		result.value = []
		console.log(key, keyPath)
	}
</script>

<template>
	<el-aside width="200px">
		<el-menu
			class="el-menu-vertical-demo"
			@open="handleOpen"
			@close="handleClose"
			router="true">
			<el-menu-item index="/home/merchant/procurementtable">
				<el-icon><icon-menu /></el-icon>
				<span>采购表</span>
			</el-menu-item>
			<el-menu-item index="/home/merchant/myorder">
				<el-icon><document /></el-icon>
				<span>我的订单</span>
			</el-menu-item>
			<el-sub-menu index="/home/merchant/procurementtable">
				<template #title>
					<el-icon><setting /></el-icon>
					<span>个人中心</span>
				</template>
				<el-menu-item-group title="">
					<el-menu-item index="/home/merchant/mystore">
						我的店铺
					</el-menu-item>
					<el-menu-item index="/home/merchant/avatar">
						头像
					</el-menu-item>
					<el-menu-item index="/home/merchant/password">
						密码
					</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
		</el-menu>
	</el-aside>
	<el-main>
		<router-view></router-view>
	</el-main>
</template>

<style scoped>
	/* 侧边 */
	.layout-container-demo .el-aside {
		color: var(--el-text-color-primary);
	}
	.el-menu-vertical-demo {
		height: 100%;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
	/* 内容 */
	.layout-container-demo .el-main {
		padding: 0;
	}
</style>
